<template>
	<div class="treeRight">
		<div class="title">{{ $t('会员账号信息') }}</div>
		<el-table
			v-loading="personalLoading"
			border
			size="mini"
			:data="memberDatas"
			style="width: 100%"
		>
			<el-table-column
				align="center"
				:label="`${$t('common.member_number')}`"
				prop="userName"
			>
				<template slot-scope="scope">
					{{ scope.row.userName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('funds.fund_audit.belong_proxy')}`"
				prop="parentProxyName"
			>
				<template slot-scope="scope">
					{{ scope.row.parentProxyName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('common.belong_merchant')}`"
				prop="merchantName"
			>
				<template slot-scope="scope">
					{{ scope.row.merchantName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="accountStatus"
				align="center"
				:label="$t('common.account_status')"
				:min-width="getWidth(100)"
			>
				<template slot-scope="scope">
					<span
						v-if="!!scope.row.paymentLockStatus"
						class="deleteRgba"
					>
						{{ $t('common.account_lock_status') }}
						<br />
					</span>
					<span
						v-if="!!scope.row.loginLockStatus"
						class="disableRgba"
					>
						{{ $t('common.login_lock_status') }}
						<br />
					</span>
					<span v-if="!!scope.row.gameLockStatus" class="lockingRgba">
						{{ $t('common.game_lock_status') }}
					</span>
					<span
						v-if="
							scope.row.loginLockStatus === 0 &&
								scope.row.gameLockStatus === 0 &&
								scope.row.paymentLockStatus === 0
						"
						class="normalRgba"
					>
						{{ $t('common.account_status_normal') }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('common.register_time')}`"
				prop="createdAt"
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<div class="title mt10">
			{{ row.cycleName }}{{ $t('期应收返点统计') }}
		</div>
		<el-table
			v-loading="rebateLoading"
			border
			size="mini"
			:data="rebateDatas"
			style="width: 100%"
		>
			<el-table-column
				align="center"
				:label="`${$t('common.member_number')}`"
			>
				{{ selectedData.userName || '-' }}
			</el-table-column>
			<el-table-column
				align="center"
				:label="$t('funds.fund_audit.rebate_state')"
				prop="payoutStatus"
			>
				<template slot-scope="scope">
					{{
						typeFilter(scope.row.payoutStatus, 'proxyPayoutStatus')
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="
					`${$t(
						'funds.proxy_member_funds_record.person_rebate_amount'
					)}`
				"
				prop="memberRebateAmount"
			>
				<template slot-scope="scope">
					{{ handleCurrency(row.currency) }}
					{{
						handleNumber(row.currency, scope.row.memberRebateAmount)
					}}
				</template>
			</el-table-column>
		</el-table>
		<div class="title mt10">{{ $t('个人返点明细') }}</div>
		<el-table
			v-loading="personalLoading"
			border
			size="mini"
			element-loading-spinner="el-icon-loading"
			class="small-size-table"
			:data="personalDatas"
			style="width: 100%"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				align="center"
				:label="`${$t('report.project')}`"
				prop="venueName"
				min-width="80px"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.venueName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="
					$t('funds.proxy_member_funds_record.person_rebate_amount')
				"
				prop="rebateAmount"
				min-width="180px"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleCurrency(row.currency) }}
					{{ handleNumber(row.currency, scope.row.rebateAmount) }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="
					`${$t(
						'funds.proxy_member_funds_record.person_rebate_proportion'
					)}`
				"
				prop="rebateRate"
				min-width="180px"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handlePercentage(scope.row.rebateRate) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('member.effective_betting')}`"
				prop="validBetAmount"
				min-width="180px"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleCurrency(row.currency) }}
					{{ handleNumber(row.currency, scope.row.validBetAmount) }}
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
import list from '@/mixins/list'
export default {
	components: {},
	mixins: [list],
	props: {
		selectedData: {
			type: Object,
			default: {}
		},
		row: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			personalLoading: false,
			personalDatas: [],
			memberLoading: false,
			memberData: {},
			rebateLoading: false,
			rebateDatas: []
		}
	},
	computed: {
		memberDatas() {
			if (this.memberData.userName) {
				return [this.memberData]
			} else {
				return []
			}
		}
	},
	watch: {
		selectedData: {
			handler(next) {
				if (next.type === 2 && next.userName) {
					this.getMemberByUserName()
					this.getProxyRateDetailPage()
					this.getProxyTeamRebate()
				}
			},
			immediate: true
		}
	},
	methods: {
		getMemberByUserName() {
			this.memberLoading = true
			this.$api
				.getOutlineInfo({
					userName: this.selectedData.userName,
					merchantId: this.row.merchantId
				})
				.then((res) => {
					this.memberData = res?.data || {}
					this.memberLoading = false
				})
				.catch(() => {
					this.memberData = {}
					this.memberLoading = false
				})
		},
		getProxyRateDetailPage() {
			this.rebateLoading = true
			this.$api
				.getProxyRateDetailPageAPI({
					proxyId: this.selectedData.parentProxyId,
					memberId: this.selectedData.id,
					reportEndDate: this.row.cycleName,
					reportStartDate: this.row.cycleName
				})
				.then((res) => {
					this.rebateDatas = res?.data?.record || []
					this.rebateLoading = false
				})
				.catch(() => {
					this.rebateDatas = []
					this.rebateLoading = false
				})
		},
		getProxyTeamRebate() {
			this.personalLoading = true
			this.$api
				.getTeamRebateDetailApi({
					id: this.selectedData.id,
					reportDate: this.row.cycleName,
					reportType: 3
				})
				.then((res) => {
					this.personalDatas = res?.data || []
					this.personalLoading = false
				})
				.catch(() => {
					this.personalDatas = []
					this.personalLoading = false
				})
		}
	}
}
</script>
<style lang="scss" scoped>
.title {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 18px;
}
.treeRight {
	width: calc(100% - 245px);
	display: flex;
	-o-display: flex;
	-ms-display: flex;
	-webkit-display: flex;
	-moz-display: flex;
	flex-direction: column;
	-o-flex-direction: column;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
}
</style>
